<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :title=" true ? '商户详情' : '' "
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    @close="onClose"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户号">
            {{ vdata.detailData['mchNo'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户名称">
            {{ vdata.detailData['mchName'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="登录名">
            {{ vdata.detailData['loginUsername'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户简称">
            {{ vdata.detailData['mchShortName'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData['type'] === 2" :sm="12">
        <a-descriptions>
          <a-descriptions-item label="服务商号">
            {{ vdata.detailData['isvNo'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData['type'] === 2" :sm="12">
        <a-descriptions>
          <a-descriptions-item label="服务商名称">
            {{ vdata.isvName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <!-- <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="联系人姓名">
            {{ vdata.detailData['contactName'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col> -->
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户类型">
            {{ vdata.detailData['type'] === 1 ? '普通商户': '特约商户' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <!-- <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="联系人手机号">
            {{ vdata.detailData['contactTel'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col> -->
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="状态">
            <a-tag :color="vdata.detailData['state'] === 1?'green':'volcano'">
              {{ vdata.detailData['state'] === 0?'禁用':vdata.detailData['state'] === 1?'启用':'未知' }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <!-- <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="联系人邮箱">
            {{ vdata.detailData['contactEmail'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col> -->
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户创建者名称">
            {{ vdata.detailData['createdBy'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户创建者sysUserId">
            {{ vdata.detailData['createdUid'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

            <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户号">
            {{ vdata.detailData['mchNo'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
                  <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="通道编号">
            {{ vdata.detailData['ifCode'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
            <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="当前通道">
            {{ vdata.detailData['ifName'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
            <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="支付宝间连号">
            {{ vdata.detailData['aliSubmerchantNo'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
            <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="微信间连号">
            {{ vdata.detailData['wechatSubmerchantNo'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
                  <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="云闪付间连号">
            {{ vdata.detailData['ysfSubmerchantNo'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
                        <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="创建日期">
            {{ vdata.detailData['createdAt'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
                        <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="更新日期">
            {{ vdata.detailData['updatedAt'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="商户归属名称">
            {{  vdata.detailData['parentAgentName'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="商户归属agentNo">
            {{ vdata.detailData['parentAgentNo'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>

    <a-row>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="行业类型">
            <MCC 
              v-if="vdata.detailData['mcc']"
              v-model:value="vdata.detailData['mcc']" 
              style="width: 80%; margin-top: -5px; " 
              :bordered="false" 
              :disabled="true" 
              :showDown="true"
            />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>

    <a-row justify="start" type="flex">
      <a-col :sm="24">
        <a-form-item label="备注">
          <a-input
            v-model:value="vdata.detailData['remark']"
            type="textarea"
            disabled="disabled"
            style="height: 50px"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row justify="start" type="flex">
      <a-col :sm="24">
        <a-form-item label="渠道列表">
          <a-table :columns="tableColumns" :data-source="vdata.detailData['mchChannelEntityList']" row-key="ifCode" :pagination="false" :bordered="false" size="small"  :scroll="{ x: 200 }">
            <template #bodyCell="{ record, column }">
              <template v-if="column.key === 'state'">
                {{ record[column.key] === 0 ? '未使用' : '正在使用' }}
              </template>
              <template v-else>{{ record[column.key] ? record[column.key] : '--' }}</template>
            </template>
          </a-table>
        </a-form-item>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { API_URL_MCH_LIST, req } from '@/api/manage'
  import {defineProps,reactive} from 'vue'

    const props = defineProps({
      callbackFunc: { type: Function,default:null }
  })

    const vdata = reactive({
        btnLoading: false,
        detailData: {}, // 数据对象
        recordId: null, // 更新对象ID
        visible: false, // 是否显示弹层/抽屉
        isvList: [], // 服务商下拉列表
        isvName: '' // 服务商名称
    })

    // 渠道列表表头
    const tableColumns = [
      { key: 'ifName', title: '通道名称', dataIndex: 'ifName',fixed: 'left', width: 100 },
      { key: 'ifCode', title: '通道代码', dataIndex: 'ifCode', width: 100 },
      { key: 'wechatSubmerchantNo', title: '微信间连号', dataIndex: 'wechatSubmerchantNo', width: 120 },
      { key: 'aliSubmerchantNo', title: '支付宝间连号', dataIndex: 'aliSubmerchantNo', width: 150 },
      { key: 'ysfSubmerchantNo', title: '云闪付间连号', dataIndex: 'ysfSubmerchantNo', width: 150 },
      { key:'state', title: '状态', dataIndex:'state', width: 80 },
      { key: 'applyDate', title: '进件时间', dataIndex: 'applyDate', width: 180 }
    ]

    function show (recordId) { // 弹层打开事件
        vdata.detailData = { 'state': 1, 'type': 1 } // 数据清空
        // if (this.$refs.infoFormModel !== undefined) {
        //   this.$refs.infoFormModel.resetFields()
        // }
        
        vdata.recordId = recordId
        req.getById(API_URL_MCH_LIST, recordId).then(res => {
          vdata.detailData = res
          vdata.detailData['mcc']=JSON.parse(vdata.detailData['mcc'])
        })
        vdata.visible = true
      }
      function onClose () {
        vdata.visible = false
      }
defineExpose({
  show //抛出show函数给父组件
})
</script>
